<template>
    <div>
        <h1>会员显示列表</h1>
        会员名称
        <input type="text" v-model="datalist.uname">
        年龄
        <input type="text" v-model="datalist.age1">
        <input type="text" v-model="datalist.age2">
        时间
        <input type="date" v-model="datalist.timea">
        <input type="date" v-model="datalist.timeb">
        等级下拉框
        <select v-model="datalist.xlkid">
            <option v-for="c in dataxlk" :value="c.DId">{{ c.Dname }}</option>
            
        </select>
        状态
        <select v-model="datalist.zhuangtai">
            
            <option value="true">开启</option>
            <option value="false">关闭</option>
        </select>
        <input type="button" value="查询" @click="getdata">
        <input type="button" value="重置" @click="cz">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="selinfo" @click="selinfo1()">
                    </td>
                    <td>会员id</td>
                    <td>会员名称</td>
                    <td>会员密码</td>
                    <td>会员性别</td>
                    <td>会员日期</td>
                    <td>会员手机号</td>
                    <td>会员年龄</td>
                    <td>状态</td>
                    <td>会员等级编号</td>
                    <td>头像</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>
                        <input type="checkbox" v-model="arr" :value="a.HId" @change="sele()">
                    </td>
                    <td>{{a.HId}}</td>
                    <td>{{a.Name}}</td>
                    <td>{{a.Password}}</td>
                    <td>{{a.Sex?"男":"女"}}</td>
                    <td>{{moment(a.Birthday).format("YYYY-MM-DD") }}</td>
                    <td>{{a.PhoneNumber }}</td>
                    <td>{{a.Age}}</td>
                    <td>{{a.State?"开启":"关闭"}}</td>
                    <td>{{a.Dname}}</td>
                    <td>
                        <img :src="'https://localhost:7157/'+a.Img" style="height: 100px;width: 100px;">
                    </td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>
        <a href="/add">添加会员信息</a>
        <input type="button" value="首页" @click="fanye(1)">
        <input type="button" value="上一页" @click="fanye(2)">

        <input v-for="d in datazong.zongye" type="button" :value="d" @click="zhiding(d)">

        <input type="button" value="下一页" @click="fanye(3)">
        <input type="button" value="尾页" @click="fanye(4)">
        一共{{datazong.zongtiao}}条，一共{{datazong.zongye}}页，当前第{{datalist.pagindex}}页，每页显示{{datalist.pagsize}}条
        <select v-model="datalist.pagsize" @change="tiao">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <input type="button" value="批量逻辑删除" @click="deleteall">
    </div>

</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
//定义数组
const arr=ref([]);
const selinfo=ref(false)
//全选全不选
function selinfo1(){
    if(!selinfo.value)
    {
        data.value.forEach(e=>{
            arr.value.push(e.HId);
        })
    }
    else
    {
        arr.value=[];
    }
}
const sele=()=>{
    if(arr.value.length==data.value.length)
    {
        selinfo.value=true;
    }
    else
    {
        selinfo.value=false;
    }
}

const deleteall=()=>{
    if(arr.value.length==0)
    {
        alert("没有选择不能删除");
        return;
    }
    if(!confirm("您确定要删除吗？")){
        return;
    }
    axios.delete("https://localhost:7157/api/Hui/Deletepiliang",{params:{ids:arr.value.toString()}}).then(res=>{
        if(res.data>0)
        {
            alert("删除成功");
            getdata();
        }
        else
        {
            alert("删除失败");
        }
    })
}
//显示Model
const data=ref([{
      "HId": 2,
      "Name": "string",
      "Password": "string",
      "Sex": 0,
      "Birthday": "2025-04-02T10:26:40.34",
      "PhoneNumber": "string",
      "Age": 0,
      "IsDelete": true,
      "CreateDate": "2025-04-02T10:26:40.34",
      "State": true,
      "MemberLevelId": 1,
      "Img": "string",
      "DId": 1,
"Dname": "金卡会员" }]);
//翻页
const fanye=(val:any)=>{
    if(val==1)
    {
        datalist.value.pagindex=1;
        getdata();
    }
    if(val==2)
    {
        if(datalist.value.pagindex>1)
        {
            datalist.value.pagindex -=1;
            getdata();
        }
    }
    if(val==3)
    {
        if(datalist.value.pagindex<datazong.value.zongye)
        {
            datalist.value.pagindex +=1;
            getdata();
        }
    }
    if(val==4)
    {
        datalist.value.pagindex=datazong.value.zongye;
        getdata();
    }
}
//制定页码
const zhiding=(val:any)=>{
    datalist.value.pagindex=val
    getdata();
}
//重置
const cz=()=>{
    datalist.value={ uname:"",
    age1:0,
    age2:0,
    timea:"",
    timeb:"",
    xlkid:0,
    zhuangtai:"",
    pagindex:1,
    pagsize:2}
    getdata();
}
//条数
const tiao=()=>{
    getdata();
}
//钩子函数
onMounted(()=>{
    getdata();
    xlk();
})
//条件model
const datalist=ref({
    uname:"",
    age1:0,
    age2:0,
    timea:"",
    timeb:"",
    xlkid:0,
    zhuangtai:"",
    pagindex:1,
    pagsize:2
});
//总条数Model
const datazong=ref({
    zongtiao:0,
    zongye:0
});

//显示列表
const getdata=()=>{
    axios.get("https://localhost:7157/api/Hui/ShowHui",{params:datalist.value}).then(res=>{
        data.value=res.data.lists;
        //计算总条数
        datazong.value.zongtiao=res.data.datas;
        //计算总页数
        datazong.value.zongye=Math.ceil(datazong.value.zongtiao/datalist.value.pagsize);
        selinfo.value=false;
    })
}

//下拉框
const dataxlk=ref( [ {
    "DId": 0,
    "Dname": ""
  }]);

//下拉框绑定
const xlk=()=>{
    axios.get("https://localhost:7157/api/Hui/xlk").then(res=>{
        dataxlk.value=res.data;
    })
}





</script>

<style scoped>

</style>